<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2_1-CanvasRenderingContext2D的属性</title>
</head>

<body>
    <!-- https://www.canvasapi.cn/CanvasRenderingContext2D/canvas -->
    <!-- 属性 document.querySelector('canvas').getContext('2d').canvas -->
    <canvas id="canvas" width="150" height="150"></canvas>
    <script>
        /** @type {HTMLInputElement} */
        CanvasRenderingContext2D.prototype.fullCircle = function (color) {
            // 反向获取当前上下文Canvas元素
            var canvas = this.canvas
            // 获取最短边半径
            var minRadius = Math.min(canvas.width, canvas.height) / 2
            // 试用arc() API绘制圆
            this.fillStyle = color || '#000'
            // 绘制
            this.beginPath()
            this.arc(canvas.width / 2, canvas.height / 2, minRadius, 0, 2 * Math.PI)
            this.fill()
        }

        document.getElementById('canvas').getContext('2d').fullCircle('red')
    </script>
</body>

</html>